{{! -------------------------------------------------------------------------- }}
{{! Copyright 2002-2023, OpenNebula Project, OpenNebula Systems                }}
{{!                                                                            }}
{{! Licensed under the Apache License, Version 2.0 (the "License"); you may    }}
{{! not use this file except in compliance with the License. You may obtain    }}
{{! a copy of the License at                                                   }}
{{!                                                                            }}
{{! http://www.apache.org/licenses/LICENSE-2.0                                 }}
{{!                                                                            }}
{{! Unless required by applicable law or agreed to in writing, software        }}
{{! distributed under the License is distributed on an "AS IS" BASIS,          }}
{{! WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   }}
{{! See the License for the specific language governing permissions and        }}
{{! limitations under the License.                                             }}
{{! -------------------------------------------------------------------------- }}

<div class="row">
  <div class="vmgroup_role st_man medium-12 columns">
    <label>
      <span style="font-weight: 700; color: #7d7c7c;"> 
        {{tr "Role name"}}
      </span>
      <input class="role_param" type="text" id="role_name" name="name" aria-describedby="helpText" required pattern="."/>
      <small class="form-error">{{tr "Can only contain alphanumeric and underscore characters"}}</small>
    </label>
  </div> 
</div>
<div class="row">
  <div class="vmgroup_role medium-6 columns end">
    <label>
      <span style="font-weight: 700; color: #7d7c7c;">
        {{tr "VM-VM Affinity"}}
      </span>
      <div style="margin-left: 30px; margin-bottom:5px;">
        <input type="radio" name="protocol_{{idRole}}" value="NONE" checked><label>{{tr "None"}}</label></br>
        <input type="radio" name="protocol_{{idRole}}" value="AFFINED"><label>{{tr "Affined"}}</label></br>
        <input type="radio" name="protocol_{{idRole}}" value="ANTI_AFFINED"><label>{{tr "Anti Affined"}}</label>
      </div>
    </label>
  </div>
</div>
{{#if hostAffinityEnabled}}
<div class="row" id="host_affinity" style="margin-left:0.5%">
    <div class="medium-12 columns" style="margin-bottom: 1em; padding-left: 0em;">
        <span style="font-weight: 700; color: #7d7c7c;">
          {{tr "Host-VM Affinity"}}
        </span>  
    </div>
    <div class="medium-12 columns">
      <div class="medium-12 columns">
        <div class="select_host_role" id="list_host_roles_select">
          {{{hostsTableHTML}}}
        </div>
      </div>
      <div class="medium-12 columns" style="margin-bottom: -40px">
        <div class="medium-6 columns">
          <div class="type_affined" style="text-align:center;">
              <label>{{tr "Affined"}}</label>
              <a class="small radius" id="{{tf_btn_host_affined}}">
                <i class="fas fa-lg fa-plus-circle"></i>
              </a>
          </div>
          <div class="group_vm_host_roles_affined" id="{{group_vm_host_roles}}_affined"></div>
        </div>
        <div class="medium-6 columns" style="border-left:thin solid #ada8a8;">
          <div class="type_affined" style="text-align:center;">
            <label>{{tr "Anti Affined"}}</label>
            <a class="small radius" id="{{tf_btn_host_anti_affined}}">
              <i class="fas fa-lg fa-plus-circle"></i>
            </a>
          </div>
          <div class="group_vm_host_roles_anti_affined" id="{{group_vm_host_roles}}_anti_affined"></div>  
        </div>
      </div>
    </div>
</div>
{{/if}}